<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet 地图示例</title>
    <!-- 引入 Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
    <!-- 引入 Leaflet JavaScript -->
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    <style>
        html, body, #map {
            height: 100%;
            margin: 0;
        }
    </style>
</head>
<body>
    <!-- 地图容器 -->
    <div id="map"></div>

    <script>
        // // 初始化地图，设置中心点坐标和缩放级别
        // const map = L.map('map').setView([39.90923, 116.397428], 13);

        // // 添加 OpenStreetMap 图层
        // L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        //     attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        //     maxZoom: 19
        // }).addTo(map);
        // 初始化地图
        const map = L.map('map').setView([39.90923, 116.397428], 13);

        // 添加高德地图图层（需替换为你的Key）
        L.tileLayer('https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
            subdomains: '1234',
            attribution: '© 高德地图'
        }).addTo(map);


        // 添加标记点
        const marker = L.marker([39.90923, 116.397428]).addTo(map);
        
        // 为标记点添加弹出信息
        marker.bindPopup("<b>北京天安门</b><br>中国首都的中心位置.").openPopup();

        // 添加一个圆形区域
        const circle = L.circle([39.90923, 116.397428], {
            color: 'red',
            fillColor: '#f03',
            fillOpacity: 0.5,
            radius: 500
        }).addTo(map);
        
        // 为圆形区域添加弹出信息
        circle.bindPopup("天安门周边区域");

        // 添加一个多边形
        const polygon = L.polygon([
            [39.91923, 116.387428],
            [39.92923, 116.397428],
            [39.91923, 116.407428]
        ]).addTo(map);
        
        // 为多边形添加弹出信息
        polygon.bindPopup("这是一个多边形区域");

        // 添加一个简单的弹出窗口
        const popup = L.popup()
            .setLatLng([39.90923, 116.387428])
            .setContent("你好，这是一个自定义弹出窗口!")
            .openOn(map);

        // 地图点击事件
        function onMapClick(e) {
            popup
                .setLatLng(e.latlng)
                .setContent("你点击了地图位置: " + e.latlng.toString())
                .openOn(map);
        }

        map.on('click', onMapClick);
    </script>
</body>
</html>
    